<template>
  <div class="inter">
    <loading v-bind:state="state"></loading>
    <div class="top">
      <div class="top_l">
        <p class="p1">代金券退货</p>
        <p class="p2">{{date}}</p>
      </div>
      <p class="p3">{{this.$route.query.money}}元</p>
    </div>
    <div class="main">
      <div class="main_l">
        <div class="item_l" v-for="(item , index) in stateCopup" :key="index" style="position: relative;">
          <div class="line"></div>
          <img v-if="item.iconState"
               src="http://sxian.oss-cn-beijing.aliyuncs.com/icon/duihao.png"/>
          <img v-else src="http://sxian.oss-cn-beijing.aliyuncs.com/icon/guanbi1.png"/>
        </div>
      </div>
      <div class="main_r">
        <div class="item_r" v-for="(item , index) in stateCopup" :key="index">
          <div class="p4">{{item.des}}</div>
          <div class="p5">{{item.msg}}</div>
        </div>
      </div>
    </div>
    <link-opinion></link-opinion>
    <div class="btn_o">
      <BtnPrimary btn-text="完成" @click.native="checkOn" btn-width="53.33vw"></BtnPrimary>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import CopupItem from '@/components/spread/CopupItem.vue';
  import LinkOpinion from '@/components/common/LinkOpinion';
  import BtnPrimary from '@/components/common/BtnPrimary';

  export default {
    name: `couponstate`,
    components: {
      CopupItem, LinkOpinion, BtnPrimary
    },
    data() {
      return {
        state: true,
        copupData: [],
        date: '',
        stateCopup: [
          {nid: 0, iconState: true, des: '正在处理订单信息', msg: '请耐心等侯...'},
          {nid: 1, iconState: true, des: '正在处理订单信息', msg: '请耐心等侯...'},
          {nid: 2, iconState: true, des: '正在处理订单信息', msg: '请耐心等侯...'},
          {nid: 3, iconState: true, des: '正在处理订单信息', msg: '请耐心等侯...'},
          {nid: 4, iconState: false, des: '代金券退货成功', msg: '可在“推广-代金券”中查看...'},
          {nid: 5, iconState: false, des: '代金券退货成功', msg: '可在“推广-代金券”中查看...'},
          {nid: 6, iconState: false, des: '代金券退货成功', msg: '可在“推广-代金券”中查看...'}
        ]
      };
    },
    created() {
//      this.queryData = this.$route.query.money;
      this.$Spread.getvoucherUrl().then(res => {
        this.state = false;
        this.copupData = res;
        console.log('inter', res);
      }, () => {
        this.state = false;
      });
      this.date = new Date().toLocaleDateString();
    },
    methods: {
      checkOn() {
        // 返回代金券列表
        this.$router.go(-1);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
  .btn_o {
    width: 100vw;
    flex-x();
    justify-content: center;
    height: vw(55px);
    background: #fff;
    position: fixed;
    bottom: 0;
  }

  .line {
    width: 1px;
    background: main-color;
    height: 14.4vw;
    position: absolute;
    z-index: 0;
    left: 2.3vw;
  }

  .main {
    flex-x();
    padding: 0 vw(15);
    background: #fff;
    & .main_l {
      flex-y();
      width: 12vw
      & .item_l:first-child .line {
        margin-top: 5vw;
        height: 9.4vw;
      }
      & .item_l:last-child .line {
        margin-top: -3vw;
        height: 9.4vw;
      }
      & .item_l {
        height: vw(54px);
        flex-x()
      }
    }
    & .main_r {
      flex-y();
      flex: 1;
      align-items: stretch;
      & .item_r {
        flex: 1;
        height: vw(54px);
        flex-y();
        align-items: flex-start;
        & .p4 {
          line-height: 1.5
        }
      }
    }

  }

  .item_l img {
    width: 5vw;
    position relative;
    background: #fff;
  }

  .top {
    height: vw(72px);
    flex-x();
    background: white;
    box-sizing: border-box;
    padding: 0 vw(15px);
    & .top_l {
      height: vw(72px);
      flex: 1;
      flex-y();
      bor-b(#f5f5f5, 1px)
      align-items: flex-start;
      & .p1 {
        line-height: 2
      }
    }
  }

  .p1 {
    word(16px, #333)
  }

  .p2 {
    word(14px, #999)
  }

  .p3 {
    word(18px, #333)
  }

  .p4 {
    word(16px, main-color)
  }

  .p5 {
    word(10px, #999)
  }
</style>
